<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>${SYSTEM_NAME}</title>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/static/layuiadmin/layui/css/layui.css?v=${FILE_VERSION}" media="all">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/static/layuiadmin/style/admin.css?v=${FILE_VERSION}" media="all">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/zTree_v3/css/metroStyle/metroStyle.css?v=${FILE_VERSION}" type="text/css">
</head>
<body>
	<input id="parentId" type="hidden">
	<div class="layui-fluid">
		<div class="layui-card">
			<div class="layui-card-header">菜单管理</div>
			<div class="layui-card-body">
				<div class="layui-row layui-col-space10">
					<div class="layui-col-xs2">
						<div style="border: 1px solid #ccc;max-height: 550px;min-height:400px; overflow: auto;" >
							<ul id="treeRegion" class="ztree">
								菜单加载中...
							</ul>
						</div>
					</div>

					<div class="layui-col-xs10" style="padding-left: 15px">
						<div>
							<input type="hidden" id="categoryId" >
							<div class="layui-form layer-query" >
								<div class="layui-form-item">
									<div class="layui-inline">
										<label class="layui-form-label">名称：</label>
										<div class="layui-input-inline">
											<input type="text" name="name" placeholder="请输入菜单名称" id="name" autocomplete="off" class="layui-input">
										</div>
									</div>
									<div class="layui-inline">
										<button class="layui-btn layui-btn-primary layui-border-blue" onclick="reload()">查询</button>
									</div>
								</div>
							</div>
						</div>
						<hr class="layui-bg-green">
						<table class="layui-table" lay-filter="tableList" id="layerTable">
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script type="text/html" id="toolbar">
		<div class="layui-btn-container">
			<button class="layui-btn layui-btn-primary layui-border-blue" onclick="addLayerLocal();">新增</button>
			<button class="layui-btn layui-btn-primary layui-border-blue" onclick="modi();">编辑</button>
			<button class="layui-btn layui-btn-primary layui-border-red" onclick="deleteBatch();">删除</button>
		</div>
	</script>

	<script type="text/html" id="dateTpl">
		{{  new Date(d.dateCreate).format("yyyy-MM-dd hh:mm:ss") }}
	</script>

	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-primary layui-border-red layui-btn-xs " lay-event="del">删除</a>
	</script>

	<script src="${pageContext.request.contextPath}/static/js/common-2.0.0.js?v=${FILE_VERSION}"></script>
	<script src="${pageContext.request.contextPath}/static/layuiadmin/layui/layui.js?v=${FILE_VERSION}"></script>
	<script src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.min.js?v=${FILE_VERSION}"></script>
	<script src="${pageContext.request.contextPath}/static/js/zTree_v3/js/jquery.ztree.core.js?v=${FILE_VERSION}"></script>
	<script src="${pageContext.request.contextPath}/static/js/common/commOrgTree.js?v=${FILE_VERSION}123"></script>
	<script src="${pageContext.request.contextPath}/static/js/common/coreTree-2.0.0.js?v=${FILE_VERSION}"></script>

	<script src="${pageContext.request.contextPath}/static/js/core-2.0.0.js?v=${FILE_VERSION}"></script>
<script>
var table,layer;
layui.config({
	base: getContextPath() + '/static/layuiadmin/' //静态资源所在路径
}).extend({
	index: 'lib/index' //主入口模块
}).use(['table','element','layer'], function() {
	createOrgTree(true,"/sys/menu/list/listAllTree",false);
	layer = layui.layer;
    table = layui.table;
    table.render({ //其它参数在此省略
	  elem : '#layerTable',
	  even :"true",
		toolbar: '#toolbar',
		defaultToolbar: ['filter', 'exports', 'print'],
		limit: 10,
		limits: [10,30,50,100],
	  id: 'tableList',
	  url: getContextPath() + '/sys/menu/list/menuList',
	  page:true, 
	  //where: {token: 'sasasas', id: 123} //如果无需传递额外参数，可不加该参数
	  method: 'post', //如果无需自定义HTTP类型，可不加该参数
	  cols:  [[ //标题栏
         {checkbox: true, fixed: true}
         ,{field:'name', width:140,title:"名称"}
         ,{field:'shiro', title:"权限",minWidth: 200}
         ,{field:'sort', width:80,sort: true,title:"排序"}
         ,{field:'isShowName', width:90,title:"是否显示"}
         ,{field:'href', width:220,title:"访问链接"}
         ,{field:'icon', width:200,title:"图标"}
		 ,{field:'modeName', width:110,title:"显示方式"}
         ,{fixed: 'right', width:160, align:'center',title:"操作", toolbar: '#barDemo'}
       ]],
	  request: {
          pageName: 'current', //页码的参数名称，默认：page
          limitName: 'size' //每页数据量的参数名，默认：limit
	  } //如果无需自定义请求参数，可不加该参数
	});
  
  //监听工具条
  table.on('tool(tableList)', function(obj){
    var data = obj.data;
    if(obj.event === 'del'){
    	deleteById(data,obj);
    } else if(obj.event === 'edit'){
		addLayer('/sys/menu/edit/input?id='+ data.id+"&parentId="+getCurrentSelectOrgNodeId());
    	updateTableCell = obj;
    }
  });
});

function deleteById(data,obj){
	layer.confirm('真的删除此项记录么', function(index){
		$ajax({
			url: "/sys/menu/del/deleteById",
			data: {id : data.id},
	        succCallback: function (json) {
	        	if(json.code == 0){
            		obj.del();
            		var deleteNode = ZtreeObj.getNodeByParam("id", data.id, null);
            		ZtreeObj.removeNode(deleteNode);
            	}
	        }
		});
	});
}

function reload(pId){
	if(typeof(pId) != "undefined"){
		$('#parentId').val(pId);
	}
	let param = {
		"parentId":getCurrentSelectOrgNodeId(),
		"name": $('#name').val()
	};
	coreReload("tableList",param);
}

function addLayerLocal(){
	var treeParentId= getCurrentSelectOrgNodeId();
	if(!treeParentId){
		layer.msg("请选择所属菜单");
		return;
	}
	addLayer('/sys/menu/add/input?parentId='+ treeParentId);

}

function modi(){
	var checkStatus = table.checkStatus('tableList')
    ,data = checkStatus.data;
	if(data.length == 0 || data.length > 1){
		layer.msg("请选择一条数据");
		return false;
	}
	addLayer('/sys/menu/edit/input?id='+ data[0].id+"&parentId="+getCurrentSelectOrgNodeId());
}


function deleteBatch(){
	var checkStatus = table.checkStatus('tableList')
    ,data = checkStatus.data;
	var ids = "";
	if(data.length == 0 ){
		layer.msg("请至少选择一条数据");
		return false;
	}else{
		for (var i = 0; i < data.length; i++) {
			ids += data[i].id;
			if(i != (data.length -1))
				ids += ",";
		}
	}
	layer.confirm('您确定要批量删除数据吗？此操作不可逆转，请谨慎使用！', function(index){
		$ajax({
			url: "/sys/menu/del/deleteByIds",
			data: {"ids" : ids},
	        succCallback: function (json) {
				if(json.code == 0){
					for (var n = 0; n < data.length; n++) {
						var deleteNode = ZtreeObj.getNodeByParam("id", data[n].id, null);
						ZtreeObj.removeNode(deleteNode);
					}
					reload();
				}
	        }
		});
	});
}

/**
 * 树节点点击回调
 * @param node
 */
function orgTreeClickCallback(node){
	reload();
}
</script>
</body>
</html>